<template>
    <div style="padding: 20px">
        <avue-crud ref="crud" :option="option" v-model="form" :page.sync="page" :table-loading="loading" :data="data"
            @on-load="getList" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" @refresh-change="refreshChange"
            :search.sync="search" @search-reset="searchReset" @search-change="searchChange">
            <template slot="menuLeft" slot-scope="scope">
                <el-button size="small" icon="el-icon-search" @click="$refs.crud.searchChange(search)">搜索</el-button>
                <el-button size="small" icon="el-icon-delete" @click="$refs.crud.searchReset()">清空</el-button>
            </template>

            <template slot="menu" slot-scope="scope">
                <el-button icon="el-icon-position" type="success" size="small" @click="dialogue_click(scope.row)">对话
                </el-button>
                <el-button icon="el-icon-edit" type="primary" size="small" @click="edit_click(scope.row)">编辑
                </el-button>
                <el-button icon="el-icon-delete" type="danger" size="small" @click.stop="$refs.crud.rowDel(scope.row)">删除
                </el-button>
            </template>

            <!--自定义列-->
            <template slot="name" slot-scope="scope">
                <a @click="viewDetail(scope.row._id)">{{ scope.row.name }}</a>
            </template>
        </avue-crud>

        <!-- 简易配置 -->
        <el-dialog title="应用配置" :visible.sync="deploy_dialogVisible" :before-close="handleClose" :close-on-press-escape="false"
            :close-on-click-modal="false" width="60%">
            <avue-form ref="crud1" v-model="deploy_form" :option="deploy_option" @submit="deploy_submit">
                <template slot="menuForm" slot-scope="scope">
                    <el-button icon="el-icon-circle-close" @click="closeDeploy">取消</el-button>
                </template>
            </avue-form>
        </el-dialog>

        <!-- 简易配置 -->
        <el-dialog :title="title" class="dialogue_box" style="height: 80%;" :visible.sync="dialogue_dialogVisible" :before-close="dialogue_handleClose" :close-on-press-escape="false"
            :close-on-click-modal="false" width="80%">
            <div class="history-list" v-if="isChatFlag">
              <!-- <div class="add-list"><svg class="chakra-icon css-1fo93lp" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64" focusable="false" aria-hidden="true"><path d="M512 26.548c268.115 0 485.452 217.337 485.452 485.452S780.115 997.452 512 997.452a483.51 483.51 0 0 1-222.677-53.982L103.59 995.267a60.681 60.681 0 0 1-74.76-74.76L80.677 734.92A483.51 483.51 0 0 1 26.548 512C26.548 243.885 243.885 26.548 512 26.548zm0 72.818A412.634 412.634 0 0 0 99.366 512c0 71.361 18.107 139.956 52.089 200.831l7.282 13.108-53.983 193.404 193.55-53.983 13.107 7.282A412.634 412.634 0 1 0 512 99.366zm-157.772 461.18h218.356a36.409 36.409 0 0 1 4.952 72.477l-4.952.34H354.228a36.409 36.409 0 0 1-4.951-72.478l4.951-.34h218.356-218.356zm0-169.909h315.787a36.409 36.409 0 0 1 4.903 72.478l-4.903.34H354.228a36.409 36.409 0 0 1-4.951-72.478l4.951-.34h315.787-315.787z"></path></svg>新对话</div> -->
              <div class="list" :class="{'active-list':currentIndex===index}" v-for="(item,index) in historyChatList" :key="index" @click="switchsSssion(item,index)">{{item.title}}</div>
            </div>
            <div class="container" :class="{'chatlist-box':isChatFlag}">
              <div class="message_box"  ref="messageContainer">
                <div class="box welcomeText" v-if="dialogueInfo.welcomeText != undefined && dialogueInfo.welcomeText != ''">
                  <div class="head">
                    <div class="head-box"><img src="@/assets/logo.svg"/></div>
                  </div>
                  <div class="msg"><div class="text">{{ dialogueInfo.welcomeText }}</div></div>
                </div>
                <!-- <div class="box box_l variables" v-if="dialogueInfo.variables" style="width:50%">
                  <div class="head">
                    <img src="@/assets/logo.svg"/>
                  </div>
                  <div class="msg" style="width:100%">
                    <div class="line" v-for="(item,index) in dialogueInfo.variables">
                      <div class="label">{{ item.label }}  <span v-if="item.required">*</span></div>
                      <div class="input" v-if="item.type === 'select'">
                        <el-select v-model="item.result" placeholder="请选择" style="width:100%">
                          <el-option
                            v-for="i in item.enums"
                            :key="i.value"
                            :label="i.value"
                            :value="i.value">
                          </el-option>
                        </el-select>
                      </div>
                      <div class="input" v-if="item.type === 'input'">
                        <el-input v-model="item.result" placeholder="请输入内容"></el-input>
                      </div>
                      <div class="input" v-if="item.type === 'textarea'">
                        <el-input v-model="item.result" type="textarea" :autosize="{minRows:4,maxRows:5}" placeholder="请输入内容"></el-input>
                      </div>
                    </div>
                    <div class="msg_btn" @click="beginSpeak"><i class="el-icon-chat-line-round"></i>开始对话</div>
                  </div>
                </div> -->
                <div class="box welcomeText fn-clear" v-for="(item,index) in msgList" :key="index" :class="{'box_r':item.obj === 'Human'}">
                  <div class="head">
                    <div class="head-box">
                      <img :src="avatar" class="user-avatar" v-if="item.obj === 'Human'"/>
                      <img src="@/assets/logo.svg" v-else/>
                    </div>
                  </div>
                  <div class="msg"><div class="text">{{ item.value }}</div></div>
                </div>

                <div class="box welcomeText fn-clear" id="answering" v-if="isLoading">
                  <div class="head">
                    <div class="head-box">
                      <img src="@/assets/logo.svg"/>
                    </div>
                    <div class="css-pa1kll" v-if="moduleStatusName != null">
                      <div class="dot"></div>
                      <div class="name">{{ moduleStatusName }}</div>
                    </div>
                  </div>
                  <div class="msg" ref="answering">
                    <div class="text">
                      {{answerText}}
                      <div class="cursor" :style="{ visibility: cursorVisible ? 'visible' : 'hidden' }"></div>
                    </div>
                  </div>
                </div>

              </div>
              <div class="btn-notice">
                <el-input type="textarea" :autosize="{minRows:1,maxRows:5}" v-model="notice" @keyup.enter.native="handleEnter"></el-input>
                <div v-if="!isLoading">
                  <div class="send" v-if="notice.length == 0">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="chakra-icon css-ee6or9" focusable="false"><path d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" fill="currentColor"></path></svg>
                  </div>
                  <div class="send send_active" v-else @click="sendHandle">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="chakra-icon css-ee6or9" focusable="false"><path d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" fill="currentColor"></path></svg>
                  </div>
                </div>
                <div class="loading" v-else>
                  <svg class="chakra-icon css-ok556k" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32" focusable="false"><path d="M885.333 85.333H138.667a53.393 53.393 0 0 0-53.334 53.334v746.666a53.393 53.393 0 0 0 53.334 53.334h746.666a53.393 53.393 0 0 0 53.334-53.334V138.667a53.393 53.393 0 0 0-53.334-53.334zM725.333 688A37.373 37.373 0 0 1 688 725.333H336A37.373 37.373 0 0 1 298.667 688V336A37.373 37.373 0 0 1 336 298.667h352A37.373 37.373 0 0 1 725.333 336z"></path></svg>
                </div>
              </div>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import { getList, update, add, del, detail, dataset, fastgpt_universal, chatTest, chatHistories, chatInit, completions } from './api'
import option from './option'
import { getToken } from '@/utils/auth'
import axios from 'axios'
import { fetchEventSource } from '@microsoft/fetch-event-source';
import deploy_option from './deploy_option'
import { modules1,modules2,modules3,modules4 } from './module'
import { randomString, formatYmd } from '@/utils'

export default {
    data() {
        return {
            page: {
                pageSize: 100
            },
            form: {},
            deploy_form: {},
            search: {},
            params: {},
            loading: false,
            data: [],
            title:'对话预览',
            option: option(this),
            deploy_option: deploy_option(this),
            deploy_dialogVisible: false,
            dialogue_dialogVisible:false,
            modules:[],
            type:'simple',
            id:'',
            chatId:'',
            name:'',
            notice:'',
            mode:'',
            isCloseDialogue:false,
            dialogueInfo:{},
            isLoading:false,
            msgList:[],
            historyChatList:[],
            eventSource:null,
            moduleStatusName:null,
            answerText:'',
            currentIndex: 0,
            cursorVisible: true,
            isChatFlag:false,
        }
    },
    created() {

    },
    mounted() {
      
    },
    computed: {
        ...mapGetters(['userInfo','avatar'])
    },
    methods: {

      scrollToBottom() {
        this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
      },
      // //添加新对话
      // addSssion(){

      // },

      //切换对话
      switchsSssion(item,index){
        this.currentIndex = index;
        this.msgList = [];
        this.getChatinit(item.appId,item.chatId)
      },

      handleEnter(event){
        if (event.keyCode === 13) {
          event.preventDefault();
          // 回车键被按下时执行的操作
          if(!this.isLoading){
            this.sendHandle()
          }
        }
      },
      toggleCursor() {
        // 切换光标的可见性
        this.cursorVisible = !this.cursorVisible;
      },
      //点击开始对话
      beginSpeak(){
        // console.log(this.dialogueInfo.variables)
        // console.log(this.result)
      },
      //发送聊天
      async sendHandle(){
        var _self = this;
        let params = null;
        if(this.mode === 'test'){
          params = {
            appId:this.id,
            appName:`调试-${this.name}`,
            detail:true,
            history:[],
            modules:this.modules,
            prompt:this.notice,
            stream:true,
            variables:{}
          }
        }else{
          params = {
            messages:[
              {
                role:'user',
                content:this.notice
              },{
                role:'assistant',
                content:''
              }
            ],
            appId:this.id,
            chatId:this.chatId,
            detail:true,
            stream:true,
            variables:{}
          }
        }
        var obj = {};
        obj.obj = "Human",
        obj.value = this.notice
        this.msgList.push(obj)
        this.$nextTick(() =>{
          this.scrollToBottom()
        })
        this.notice = '';
        this.answerText = '';
        this.isLoading = true;
        var answerObj = {
          value:'',
          obj:''
        }
        var status = true;
        this.cursorTimer = setInterval(this.toggleCursor, 800);
        const api = process.env.NODE_ENV === 'development'?'/api':'/chat-api'
        try {
          fetchEventSource(process.env.VUE_APP_BASE_API + (this.mode === 'test' ? api + '/core/chat/chatTest' : api + '/v1/chat/completions'), {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'token': `${getToken()}`
            },
            body: JSON.stringify(params),
					  openWhenHidden: true,
            onopen(res){
              const contentType = res.headers.get('content-type');
              if (contentType?.startsWith('text/plain')) {
                _slef.$message.error(res.clone().text());
              }
              if (
                !res.ok ||
                !res.headers.get('content-type')?.startsWith('text/event-stream') ||
                res.status !== 200
              ) {
                try {
                  _slef.$message.error(res.clone().json());
                } catch {
                  _self.$message.error(res.clone().text());
                }
              }
            },
            onmessage({event,data}) {
              console.log(event)
              console.log(data)
              if(data != '[DONE]') var content = JSON.parse(data);
              if(event === 'moduleStatus'){
                  _self.moduleStatusName = content.name
              }
              if(event === 'error'){
                _self.$message.error(data);
                status = false;
              }
              if(event === 'answer' && content != undefined){
                if(content.choices[0].delta.content){
                  _self.answerText += content.choices[0].delta.content;
                  answerObj.value += content.choices[0].delta.content;
                }
                _self.$nextTick(() =>{
                  _self.scrollToBottom()
                })
              }
            },

            onclose(){
              _self.isLoading = false;
              if(status){
                answerObj.obj = 'AI'
                _self.msgList.push(answerObj)
              }
              clearInterval(_self.typingTimer);
            },
            onerror(error){
              _self.isLoading = false;
              clearInterval(_self.typingTimer);
              throw error
            }
				  });
        } catch (error) {
          console.error('Fetch error:', error);
        }
      },

        randomHandle(){
          var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
          var n = 6, s = "";
          for(var i = 0; i < n; i++){
              var rand = Math.floor(Math.random() * str.length);
              s += str.charAt(rand);
          }
          return s;
        },

        //获取知识库
        getAllDataset(){
            dataset().then(res =>{
                const { data } = res;
                const arr = [];
                data.map(item =>{
                    let obj = {};
                    obj.label = item.name;
                    obj.value = item._id;
                    arr.push(obj)
                })
                const datasets = this.findObject(this.deploy_option.column, 'datasets') 
                const systemPrompt = this.findObject(this.deploy_option.column, 'systemPrompt')
                const datasetArr = [];
                this.modules.map(item =>{
                  Object.keys(item).forEach(key => {
                    if(key === 'flowType' && item[key] === 'userGuide'){
                      item['inputs'].map(i =>{
                        const variables = [];
                        if(i.key === "welcomeText"){
                          this.deploy_form.prologue = i.value
                        }
                        if(i.key === "variables"){
                          if(i.value.length > 0){
                            i.value.map(ie =>{
                              const obj = {};
                              obj.variateName = ie.label;
                              obj.variateKey = ie.key;
                              obj.isRequired = ie.required?1:0;
                              obj.variateType = ie.type === 'textarea'?'dl':ie.type === 'input'?'wb':'xlxz';
                              obj.variateMaxlen = ie.type === 'input'?ie.maxLen:50;
                              const options = [];
                              if(ie.type === 'select'){
                                ie.enums.length > 0 && ie.enums.map(k =>{
                                  const o = {};
                                  o.variateXxOptions = k.value;
                                  options.push(o)
                                })
                                obj.variateXx = options
                              }
                              variables.push(obj)
                            })
                            this.deploy_form.variables = variables;
                          }
                        }
                      })
                    }
                    if(key === 'flowType' && item[key] === 'chatNode'){
                      item['inputs'].map(i =>{
                        if(i.key === "systemPrompt"){
                          if(i.value){
                            this.deploy_form.systemPrompt = i.value;
                          }else{
                            this.deploy_form.systemPrompt = ''
                            systemPrompt.placeholder = "模型固定的引导词，通过调整该内容，可以引导模型聊天方向。该内容会被固定在上下文的开头。可使用变量，例如 {{language}}"
                          }
                        }
                        if(i.key === "model"){
                          if(i.value === 'ChatGLM3'){
                            this.deploy_form.aiSettings = 'ChatGLM3'
                          }else{
                            this.deploy_form.aiSettings = ''
                          }
                        }
                      })
                    }
                    if(key === 'flowType' && item[key] === 'datasetSearchNode'){
                      item['inputs'].map(i =>{
                        if(i.key === "datasets"){
                          i.value.map(ie =>{
                            datasetArr.push(ie.datasetId)
                          })
                        }
                      })
                    }
                  });
                })
                datasets.dicData = arr;
                this.deploy_form.datasets = datasetArr;
                this.deploy_dialogVisible = true;
            })
        },

        //关闭聊天窗口
        dialogue_handleClose(){
          this.dialogue_dialogVisible = false;
          this.isCloseDialogue = false;
          this.dialogueInfo = {};
          this.msgList = [];
          this.historyChatList = [];
          this.isChatFlag = false;
        },
        //关闭应用配置弹窗
        handleClose(){
          this.deploy_dialogVisible = false;
          this.deploy_form.variables = []
          if(this.isCloseDialogue){
            setTimeout(() =>{
              this.dialogue_dialogVisible = true;
              this.mode = 'test';
              this.title= '预览对话';
              this.msgList = []
            },500)
          }
        },

        //关闭应用配置弹窗
        closeDeploy(){
          this.handleClose();
        },

        //提交应用配置
        deploy_submit(form,done) {
          const datasets = []
          form.datasets.map(item =>{
            const obj = {}
            obj.datasetId = item;
            obj.vectorModel = {
              model: "m3e-base",
              name: "m3e-base",
              price: 0.2,
              defaultToken: 700,
              maxToken: 3000
            }
            datasets.push(obj)
          })
          const variables = [];
          form.variables.map(item =>{
            const arr = [];
            item.variateXx.length > 0 && item.variateXx.map(i =>{
              const o = {};
              o.value = i.variateXxOptions
              arr.push(o)
            })
            const obj = {}
              obj.key =  item.variateKey,
              obj.label = item.variateName,
              obj.type = item.variateType === 'dl'?'textarea':item.variateType === 'wb'?'input':'select',
              obj.required = item.isRequired === 1?true:false,
              obj.maxLen = item.variateMaxlen,
              obj.enums = arr
              variables.push(obj)
          })
          const params = {
            formData:{
              aiSettings:{
                model: form.aiSettings === 'ChatGLM3' ? "ChatGLM3" :'gpt-3.5-turbo-16k',
                systemPrompt: form.systemPrompt,
                temperature: 0,
                isResponseAnswerText: true,
                quotePrompt: "",
                quoteTemplate: "",
                maxToken: form.aiSettings === 'ChatGLM3' ? 2000 : 4000
              },
              templateId:form.modules,
              userGuide:{
                welcomeText: form.prologue,
                variables: variables,
                questionGuide: false,
                tts: {
                  type: "web"
                }
              },
              dataset:{
                datasets: datasets,
                similarity: 0.4,
                limit: 1500,
                searchEmptyText: "",
                searchMode: "embedding"
              }
            },
            chatModelMaxToken:4000,
            chatModelList:[
              {
                model: "ChatGLM3",
                name: "ChatGLM3",
                price: 0,
                maxToken: 4000,
                quoteMaxToken: 2000,
                maxTemperature: 1.2,
                censor: false,
                defaultSystemChatPrompt: ""
              }
            ]
          }
          this.modules.map(item =>{
            Object.keys(item).forEach(key => {
              if(key === 'flowType' && item[key] === 'userGuide'){
                item['inputs'].map(i =>{
                  if(i.key === "welcomeText"){
                    i.value = form.prologue
                  }
                  if(i.key === "variables"){
                    i.value = variables
                  }
                })
              }
              if(key === 'flowType' && item[key] === 'chatNode'){
                item['inputs'].map(i =>{
                  if(i.key === "model"){
                    i.value = form.aiSettings === 'ChatGLM3' ? "ChatGLM3" :'gpt-3.5-turbo-16k'
                  }
                  if(i.key === 'systemPrompt'){
                    i.value = form.systemPrompt
                  }
                })
              }
              if(key === 'flowType' && item[key] === 'datasetSearchNode'){
                item['inputs'].map(i =>{
                  if(i.key === "datasets"){
                    i.value = datasets
                  }
                })
              }
            });
          })
          fastgpt_universal(params).then(res =>{
            const data = {
              modules:this.modules,
              simpleTemplateId:form.modules,
              type:this.type
            }
            update({appId:this.id},data).then(respones =>{
              variables.length > 0 && variables.map(item =>{
                item.result = null
              })
              this.dialogueInfo.welcomeText = form.prologue
              this.dialogueInfo.variables = variables
              this.isCloseDialogue = true;
              this.closeDeploy()
              done()
            })
          })
        },

        viewDetail(id) {
            const params = {
                appId: id
            }
            detail(params).then(res => {
              this.modules = res.data.modules;
              this.deploy_form.modules = res.data.simpleTemplateId;
              this.type = res.data.type;
              this.id = res.data._id;
              this.name = res.data.name;
              this.getAllDataset()
            })
        },

        //获取对话内容
        getChatinit(id,chatId){
          const params = {
            appId:id,
            chatId:chatId
          }
          this.id = id;
          this.chatId = chatId;
          chatInit(params).then(res =>{
            const { data } = res;
            const { app,title,history } = data;
            const { userGuideModule } = app;
            const obj = {};
            try {
              obj.title = title;
              obj.appId = data.appId;
              obj.chatId = data.chatId;
              userGuideModule.inputs.map(item =>{
                if(item.key === 'welcomeText'){
                  console.log(item)
                  if ('value' in item) this.dialogueInfo.welcomeText = item.value
                  else this.dialogueInfo.welcomeText = undefined
                }
                if(item.key === 'variables'){
                  this.dialogueInfo.variables = item.value;
                }
              })
              this.msgList = history;
              if(!this.dialogue_dialogVisible){
                this.dialogue_dialogVisible = true;
                this.mode = 'chat';
                this.title=  `${app.name}`;
              }
              if(!this.isChatFlag){
                this.isChatFlag = true;
                this.historyChatList.push(obj)
                //获取应用历史对话记录
                chatHistories({appId:id}).then(res =>{
                  const { data } = res;
                  this.historyChatList = this.historyChatList.concat(data);
                })
              }
            } catch (error) {
              console.error('error:', error);
            }
            
          })
        },
        //打开对话窗口
        dialogue_click(row){
          this.getChatinit(row._id,'')
          // chatHistories(params).then(res =>{
          //   console.log(res)
          //   const { data } = res;
          //   this.historyChatList = data;
          //   this.isChatFlag = true;
          //   this.title= '对话';
          //   this.dialogue_dialogVisible = true;
          //   this.getChatinit(row._id,'')
          // })
        },

        getList() {
            this.loading = true
            const data = Object.assign({
                pageNum: this.page.currentPage,
                pageSize: this.page.pageSize
            }, this.params)
            this.data = []
            getList(data).then(res => {
                const { data } = res
                this.loading = false
                this.page.total = data.length
                const result = data
                this.data = result
            })
        },

        edit_click(row){
          this.$refs.crud.rowEdit(row)
        },

        // 新增
        rowSave(row, done, loading) {
          if(row.type == 'simple'){
            row.modules = modules1;
          }
          if(row.type == 'simple1'){
            row.modules = modules2;
            row.type = 'simple'
          }
          if(row.type == 'simple2'){
            row.modules = modules3;
            row.type = 'simple'
          }
          if(row.type == 'advanced'){
            row.modules = modules4;
          }
            add(Object.assign({
                
            }, row)).then(() => {
                this.$message.success('新增成功')
                done()
                this.getList()
            }).catch(() => {
                loading()
            })
        },

        // 编辑
        rowUpdate(row, index, done, loading) {
          const parmas = {
            avatar:'/icon/logo.svg',
            intro:row.intro,
            name:row.name,
            permission:row.permission
          }
          update({appId:row._id},parmas).then(() => {
              this.$message.success('修改成功')
              done()
              this.getList()
          }).catch(() => {
              loading()
          })
        },

        // 删除
        rowDel(row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return del(row._id)
            }).then(() => {
                this.$message.success('删除成功')
                this.getList()
            })
        },
        searchChange(params, done) {
            if (done) done()
            for (var key in params) {
                if (params[key] == '') {
                    delete params[key]
                }
            }
            if (params.hasOwnProperty('searchDate')) {
                params.fillingDateBegin = params.searchDate[0]
                params.fillingDateEnd = params.searchDate[1]
                delete params.searchDate
            }
            this.params = params
            this.page.currentPage = 1
            this.getList()
            this.$message.success('搜索成功')
        },
        searchReset() {
            this.params = {}
            this.page.currentPage = 1
            this.getList()
            this.$message.success('搜索成功')
        },
        refreshChange() {
            this.getList()
            this.$message.success('刷新成功')
        }
    }
}
</script>
<style>
.el-form a {
    color: blue;
}

.el-form a:hover {
    color: blue;
    text-decoration: underline;
}
.dialogue_box{
  height: 100% !important;
  .el-dialog{
    height: 90%;
    margin-top: 3.5% !important;
    .el-dialog__body{
      border-top: 1px solid #e2e8f0;
      padding:0px;
      height: calc(100% - 54px);
      max-height: calc(100% - 54px);
      overflow-y: scroll;
      display: flex;
      .el-input__inner{
        background-color: #f8f8f8;
        height: 35px;
        line-height: 35px;
      }
      .el-textarea__inner{
        background-color: #f8f8f8;
      }
      .el-input__icon{
        line-height: 35px;
      }
      .history-list{
        width:25%;
        border-right: 1px solid #e2e8f0;
        padding: 10px;
        .add-list{
          text-align: center;
          color: #3370ff;
          border: 1px solid #e2e8f0;
          padding: 10px 0;
          border-radius: 5px;
          margin-bottom: 10px;
          svg{
            fill: #3370ff;
            width:18px;
            height: 18px;
            margin-right: 5px;
            vertical-align: -3px;
          }
        }
        .list{
          padding: 10px;
          cursor: pointer;
          color: #000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          border-radius: 5px;
          &.active-list{
            background-color: #f0f7ff;
            color: #3370ff;
          }
        }
      }
      .container{
        width:100%;
        padding: 0 10px;
        &.chatlist-box{
          width:75%;
          .btn-notice{
            width:calc(75% - 20px)
          }
        }
        .message_box{
          height: auto;
          max-height: calc(100% - 62px);
          overflow-y: auto;
          .box{
            margin-top: 15px;
            .head{
              text-align: left;
              .head-box{
                width:34px;
                display: inline-block;
                height: 34px;
                padding: 3px;
                border:1px solid rgb(222, 224, 226);
                border-radius: 3px;
                background-color: #f0f7ff;
                img{
                  width:100%;
                  height: 100%;
                }
              }
            }
            &:last-child{
              padding-bottom: 10px;
            }
            .msg{
              .cursor {
                display: inline-block;
                width: 2px;
                height: 14px;
                background-color: black;
                vertical-align:-2px
              }
              .text{
                box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
                border:1px solid #e1e1e1;
                margin-top: 7px;
                padding:13px 10px;
                border-radius: 0px 8px 8px;
                width:auto;
                max-width: 80%;
                display: inline-block;
                .line{
                  margin-bottom: 10px;
                  .label{
                    margin-bottom: 5px;
                    span{
                      color:red;
                    }
                  }
                  &:last-child{
                    margin-bottom: 0;
                  }
                }
              }
              .msg_btn{
                background-color: #2152d9;
                display: inline-block;
                color: #ffffff;
                font-size: 12px;
                padding: 5px;
                border-radius: 3px;
                cursor: pointer;
                .el-icon-chat-line-round{
                  font-size: 18px;
                  margin-right: 5px;
                  color: #fff;
                  vertical-align: -2px
                }
              }
              .text{
                display: inline-block;
                line-height: 25px;
              }
            }
            &.box_r{
              .head{
                text-align: right;
              }
              .msg{
                text-align: right;
                .text{
                  border-radius: 8px 0px 8px 8px;
                }
              }
            }
          }
        }
        .btn-notice{
          border-radius: 3px;
          width:calc(100% - 20px);
          height: auto;
          min-height: 20px;
          position: absolute;
          bottom: 10px;
          padding: 15px 10px;
          box-shadow: 1px 1px 5px 1px rgba(0,0,0,.2);
          .el-textarea{
            padding-right: 60px;
          }
          textarea{
            border: none;
          }
          .el-textarea__inner{
            padding: 0;
            height: 22px;
            min-height: 22px;
            background-color: #ffffff;
          }
          .send{
            width:35px;
            height: 35px;
            position: absolute;
            right: 10px;
            bottom: 8px;
            border-radius: 3px;
            background: rgba(229,229,229,1);
            text-align: center;
            cursor: pointer;
            svg{
              width:25px;
              margin-top: 5px;
              color: #fff;
            }
          }
          .loading{
            position: absolute;
            right: 10px;
            bottom: 6px;
            text-align: center;
            cursor: pointer;
            svg{
              width:25px;
              fill:#718096;
              animation: 0.4s ease 0s infinite alternate none running zoomStopIcon;
            }
          }
          .send_active{
            background: #4e83fd;
          }
        }
      }
    }
  }
}
.dialogue_box .el-dialog .el-dialog__body .container .message_box .box .head .css-pa1kll{
  display: inline-block;
  border: 1px solid rgb(222, 224, 226);
  padding: 5px 10px;
  border-radius: 3px;
  vertical-align: 8px;
  margin-left: 10px;
}
.dialogue_box .el-dialog .el-dialog__body .container .message_box .box .head .css-pa1kll .dot {
  background: rgb(103, 193, 59);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 1px;
  display: inline-block;
  margin-right: 5px;
  animation:ChatBox_statusBox__0nuRv .8s linear infinite alternate;
}
.dialogue_box .el-dialog .el-dialog__body .container .message_box .box .head .css-pa1kll .name{
  font-size: 12px;
  display: inline-block;
}
@keyframes zoomStopIcon {
  0%{
    transform: scale(.8);
  }
  100%{
    transform: scale(1.4);
  }
}
@keyframes ChatBox_statusBox__0nuRv {
  0% {
    opacity: 1;
  }
  100% {
      opacity: .11;
  }
}

</style>
  